<template>
  <button @click="increment">
      {{ count }}- {{ double }}
  </button>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
export default {
    setup () {
        const state = reactive({
            count: 0,
            double: computed(() => state.count * 2)
        })
        
        const increment = () => {
            state.count++
        }

        return {
            ...toRefs(state),
            increment
        }
    }
}
</script>

<style>

</style>